<template>
	<view>
		<checkbox-group @change="checkboxChange">			
			<div class='demo'v-for="item in autoLabel" :key="item.id">
				<div class='flex top'>
					<label class='flex' @click='replyChange(item.id)'>
						<view>
							<checkbox :value="item.title" :checked="item.value === 1 ? true : false" />
						</view>
						<view>{{item.title}}</view>
					</label>
					<span class='changeLabel' @click='changeLabel(item.id)'>修改</span>
				</div>
				<div class='label'>
					<span>{{item.reply}}</span>
				</div>
				<u-line></u-line>
			</div>
		</checkbox-group> 
		<u-modal
			:show="show"
			showCancelButton
			closeOnClickOverlay
			@confirm="confirm"
			@cancel="cancel"
			@close="close"
		>
			<u--input
			    placeholder="请输入回复内容"
			    border="bottom"
			    clearable
				v-model="inputValue"
			  ></u--input>
		</u-modal>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				content: '确定取消对他/她的关注吗？',
				checkboxValue:[],
				replyID:null,
				autoLabel:[],
				inputValue:'',
				getvalue:null,
			}
		},
		onLoad() {
			this.$api.DLQgetAutoreply().then((res)=>{
				this.autoLabel = res.data
			})
		},
		methods:{
			getValue(id){
				this.getvalue = this.autoLabel[id-1].value
			},
			// 回复选择
			replyChange(id){
				this.getValue(id)
				this.$api.DLQupdateReplyChange({id:id,value:!this.getvalue}).then((res)=>{
				})
			},
			// 弹出修改窗口
			changeLabel(id){
				this.replyID = id
				this.show = true
			},
			// 确认
			confirm() {
				this.$api.DLQupdateReply({id:this.replyID,reply:this.inputValue}).then((res)=>{
					console.log(res)
					if(res.code === 200){
						this.show = false
						this.$api.DLQgetAutoreply().then((res)=>{
							// console.log(res)
							this.autoLabel = res.data
							this.inputValue = ''
						})
					}
				})
			},
			// 取消
			cancel() {
				this.show = false
				// console.log('cancel');
			},
			// 点击遮罩层
			close() {
				this.show = false
				// console.log('close');
			},
			checkboxChange() {},
		}
		
	}
</script>

<style lang="scss" scoped>
.u-checkbox-group--row{
    justify-content: space-between;
}
.flex{
	display: flex;
	align-items: center;
}
.demo{
	margin: 30upx 40upx 0 20upx;
	.top{
		justify-content: space-between;	
	}
	.changeLabel{
		color: #999999;
		font-size: 28upx;
	}
	.label{
		margin-left: 46upx;
		color: #999999;
		padding: 20upx 0;
		font-size: 28upx;
	}
}
</style>